<template>
    <h1>审批</h1>
    <div>
        <el-descriptions title="待审核内容">
            <el-descriptions-item label="标题:">{{ toCheckData.sub_title }}</el-descriptions-item>
            <el-descriptions-item label="提交用户:">{{ toCheckData.user_name }}</el-descriptions-item>
            <el-descriptions-item label="文字描述:">{{ toCheckData.sub_content }}</el-descriptions-item>
            <el-descriptions-item label="提交时间:">{{ toCheckData.sub_time }}</el-descriptions-item>
        </el-descriptions>
        <div class="media-gallery">
            <div class="media-container" v-for="(fileName, index) in toCheckData.fileNames" :key="index">
                <img v-if="isImage(fileName)" :src="fileName" height="200px" class="media-item" />
                <video v-else-if="isVideo(fileName)" :src="fileName" controls height="200px" class="media-item"></video>
            </div>
        </div>
        <el-form-item label="是否通过审批" prop="resource">
        <el-radio-group v-model="checkData.isPass">
            <el-radio label="是" />
            <el-radio label="否" />
        </el-radio-group>
        </el-form-item>
        <el-form-item label="审批意见">
        <el-input v-model="checkData.desc" type="textarea" />
        </el-form-item>
        <div class="button-group">
            <button @click="submit" class="btn btn-primary">提交</button>
            <button @click="cancel" class="btn btn-secondary">取消</button>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import _axios from '../axios/index';
import { useRouter,useRoute } from 'vue-router';
export default {
    setup(){
        const toCheckData = ref({
            sub_title:"",
            user_name:"",
            sub_content:"",
            sub_time:"",
            fileNames:[]
        });
        const checkData = ref({
            isPass:"",
            desc:""
        })
        const router = useRouter();
        const route = useRoute();
        const id = route.query.id;
        onMounted(()=>{
            getToCheckData();
        });
        async function getToCheckData(){
            let result = await _axios.get("/check/"+id);
            let r = result.data;
            toCheckData.value = r.data;
            //alert(JSON.stringify(r.data));
        }
        async function submit(){
            const user = sessionStorage.getItem("user");
            const userData = JSON.parse(user);
            const userId = userData.user.user_id;
            const statusId = checkData.value.isPass==="是"?7:8;
            let result = await _axios.post("/check/add",{
                desc:checkData.value.desc,
                subId:id,
                userId:userId,
                statusId:statusId});
            let r = result.data;
            alert("审核结果提交成功!");
            router.push("/checkCenter");
        }
        function cancel(){
            router.push("/checkCenter");
        }
        function isImage(fileName) {
            return /\.(jpg|jpeg|png)$/i.test(fileName);
        }
        function isVideo(fileName) {
            return /\.(mp4|avi)$/i.test(fileName);
        }
        return {
            toCheckData,
            checkData,
            submit,
            cancel,
            isImage,
            isVideo
        }
    }
}
</script>

<style scoped>
.button-group {
    text-align: center;
    margin-top: 20px;
}

.btn {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 5px;
}

.btn-primary {
    background-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #545b62;
}
</style>